<template>
	<div class="header-box">
		<div>
			<h1>TODOLIST</h1>
		</div>
		<div>
			<input v-model="value" @keyup.13="send" type="text" />
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: '',
		}
	},
	methods: {
		send() {
			if (this.value.trim().length === 0) return false
			// 1. 发送给父组件
			this.$emit('getHeader', this.value)
			// 2. 清空value
			this.value = ''
		},
	},
}
</script>

<style scoped>
/* scoped作用域，让样式只在当前的vue组件里生效 */
.header-box {
	display: flex;
}
div {
	background: rgba(47, 47, 47, 0.98);
}
</style>